// https://react.docschina.org/learn
import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {

    // react 中创建响应式数据的地方
    state = {
        count: 100,
        roomList: []
    }

    // 挂载的生命周期
    componentDidMount() {
        axios.get('/api/RoomApi/live').then(res => {
            console.log(res.data.data);
            this.setState({
                roomList: res.data.data
            })
        })

    }

    render() {
        return (
            <div>
                <h1>你好世界 --- {this.state.count}</h1>
                <button onClick={() => {
                    // this.state.count++
                    this.setState({
                        count: this.state.count + 1
                    })
                }}>点击加 1</button>


                <ol>
                    {this.state.roomList.map((item) => {

                        return (<li key={item.room_id}>
                            <img src={item.room_src} alt="" />
                            <h5>{item.room_name}</h5>
                        </li>)
                    })}
                </ol>
            </div>
        )
    }
}
